{% load static %}
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block page_title %}{% endblock %}</title>
      <link rel="stylesheet" href="{% static 'js/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
      <style>
          /* 全局样式 */
          body {
              background-color: #f8f9fa;
              min-height: 100vh;
              padding: 20px;
          }
          
          /* 卡片样式 */
          .auth-card {
              background: white;
              border-radius: 5px;
              box-shadow: 0 2px 5px rgba(0,0,0,0.1);
              padding: 25px;
              margin-top: 30px;
          }
          
          /* 标题样式 */
          .auth-title {
              text-align: center;
              margin-bottom: 20px;
              color: #333;
              font-weight: 500;
          }
          
          /* 表单样式 */
          .form-group {
              margin-bottom: 15px;
          }
          
          /* 按钮样式 */
          .btn {
              margin-bottom: 10px;
              width: 100%;
          }
          
          /* 错误消息样式 */
          .text-danger {
              font-size: 0.875rem;
              margin-top: 5px;
              display: block;
          }
          
          /* 响应式调整 */
          @media (max-width: 768px) {
              .auth-card {
                  padding: 20px;
              }
          }
      </style>
  </head>
  <body>

        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="auth-card">
                        <h2 class="auth-title">{% block content_title %}{% endblock %}</h2>
                        {% block form %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>

    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    
    <script>
        // 简单的表单提交处理
        $(document).ready(function() {
            $('form').submit(function() {
                $(this).find('button[type="submit"]').prop('disabled', true).html('处理中...');
            });
        });
    </script>
 </body>
</html>